<template>
  <div>
    <common-card title="累计用户数" :value="userToday">
      <template>
        <v-chart :options="getOptions()"></v-chart>
        <!-- <div
          id="total-users-chart"
          :style="{ width: '100%', height: '100%' }"
        ></div> -->
      </template>
      <template v-slot:footer>
        <div class="total-users-footer">
          <span>日同比</span>
          <span class="emphasis">{{userGrowthLastDay}}</span>
          <i class="el-icon-caret-top" :style="{ color: 'red' }"></i>
          <span class="month">月同比</span>
          <span class="emphasis">{{userGrowthLastMonth}}</span>
          <i class="el-icon-caret-bottom" :style="{ color: 'green' }"></i>
        </div>
      </template>
    </common-card>
  </div>
</template>

<script>
import CommonCardMixin from "@/mixins/CommonCardMixin";
import CommonDataMixin from "@/mixins/CommonDataMixin";
export default {
  mixins: [CommonCardMixin,CommonDataMixin],
  methods: {
    getOptions() {
      return {
        // 只要是画布上出现的就是一个系列
        series: [
          {
            name: "上月平台用户数",
            type: "bar",
            data: [this.userLastMonth],
            barWidth: 10,
            stack: "总量",
            itemStyle: {
              color: "#45c946",
            },
          },
          {
            name: "今日平台用户数",
            type: "bar",
            data: [this.userTodayNumber],
            barWidth: 10,
            stack: "总量", //將坐標軸合并到一個上去
            itemStyle: {
              color: "#eee",
            },
          },
          {
            type: "custom",
            stack: "总量",
            data: [this.userLastMonth],
            renderItem: (params, api) => {
              // console.log(params,api);
              const value = api.value(0); //获取第一个值
              const endPoint = api.coord([value, 0]); //获取定位
              console.log(endPoint);
              return {
                type: "group", //绘制图像 可以传入svg
                position: endPoint,
                children: [
                  {
                    type: "path",
                    shape: {
                      // 在阿里图标中查找
                      d: "M131.974144 648.752128c-30.418944 30.430208-6.474752 84.301824 34.917376 84.301824L858.258432 733.053952c42.899456 0 65.325056-53.85216 34.916352-84.301824L547.487744 302.569472c-19.930112-19.974144-49.374208-19.95264-69.327872 0L131.974144 648.752128z",
                      x: -10,
                      y: 5,
                      width: 20,
                      height: 20,
                      layout: "center", // center表示'center'：保持原来的 PathData 的长宽比，居于矩形中，尽可能撑大但不会超出矩形
                      //'cover'：PathData 拉伸为矩形的长宽比，完全填满矩形，不会超出矩形。
                    },
                    style: {
                      fill: "#45c946",
                    },
                  },
                  {
                    type: "path",
                    shape: {
                      d: "M163.396608 289.168384c-40.577024 0-66.526208 54.183936-35.44064 85.25824L477.217792 723.704832c20.031488 20.031488 49.82272 20.031488 69.853184 0l349.274112-349.278208c30.30528-30.294016 6.677504-85.25824-34.927616-85.25824L163.396608 289.168384z",
                      x: -10,
                      y: -25,
                      width: 20,
                      height: 20,
                      layout: "center",
                    },
                    style: {
                      fill: "#45c946",
                    },
                  },
                ],
              };
            },
          },
        ],
        xAxis: {
          // type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          show: false,
        },
        grid: {
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
        },
        tooltip: {
          trigger: "item", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.total-users-footer {
  .month {
    margin-left: 10px;
  }
  .emphasis {
    margin-left: 5px;
    color: #333;
    font-weight: 700;
  }
}
</style>